<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2022 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="top" [class.twolines]="needTwoLines">
    <img *ngIf="imageUrl" src="{{ imageUrl }}" class="nodeTypeImageIcon" alt="Icon of the Node Type.">
    <img *ngIf="toscaLightCompatibilityData?.isToscaLightCompatible" src="../../../assets/images/toscaLight.png"
         class="toscaLightCompatible" alt="This Service Template is TOSCALight compatible.">
    <div class="informationContainer">
        <winery-property-rename [toscaComponent]="toscaComponent" [propertyName]="'localName'"
                                [multipleVersionsAvailable]="versions?.length > 0"></winery-property-rename>
        <winery-property-rename [toscaComponent]="toscaComponent" [propertyName]="'namespace'"
                                [multipleVersionsAvailable]="versions?.length > 0"></winery-property-rename>
    </div>
    <div class="managementButtons row" *ngIf="showManagementButtons">
        <button class="btn btn-danger" (click)="openDeleteConfirmationModel()">Delete</button>
        <button *ngIf="this.configurationService.configuration.features.normalization" class="btn btn-info"
                (click)="sendToDeploymentNormalizerAssistant()">
            <span [hidden]="contactingNormalization">Normalize</span>
            <winery-loader [loaderSize]="20" [hidden]="!contactingNormalization"></winery-loader>
        </button>
        <button
            *ngIf="this.configurationService.configuration.features.researchObject && toscaComponent.toscaType === toscaTypes.ServiceTemplate"
            class="btn btn-info"
            (click)="openRoarUploadConfirmationModel()">Upload ROAR
        </button>
        <button *wineryRepositoryShowOnFeature="'radon'" (click)="openChe()" class="btn btn-info">
            Open in IDE
        </button>
        <div *ngIf="!this.configurationService.isYaml(); then xmlExport else yamlExport"></div>
        <ng-template #xmlExport>
            <div class="btn-group" dropdown>
                <button dropdownToggle type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split">
                    Export <span class="caret"></span>
                </button>
                <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                    <li>
                        <a target="_blank" href="{{ toscaComponent.xmlPath }}">XML</a>
                    </li>
                    <li class="divider dropdown-divider"></li>
                    <li>
                        <a target="_blank" href="{{ toscaComponent.xmlCsarPath }}">CSAR</a>
                    </li>
                    <li *ngIf="toscaComponent.toscaType === toscaTypes.ServiceTemplate">
                        <a target="_blank" href="{{ toscaComponent.includeDependencies }}">CSAR (XML) with
                            Dependencies</a>
                    </li>
                    <li *ngIf="accountabilityEnabled">
                        <a target="_blank" href="{{ toscaComponent.provenanceCsarPath }}">Provenance CSAR</a>
                    </li>
                    <li *ngIf="showEdmmExport">
                        <a target="_blank" href="{{ toscaComponent.edmmExportPath }}"
                           *ngIf="toscaLightCompatibilityData?.isToscaLightCompatible; else errorReport">Export to
                            EDMM</a>
                        <ng-template #errorReport>
                            <a (click)="showErrorReport()">Show TOSCA Light Error Report</a>
                        </ng-template>
                    </li>
                    <ng-container *ngIf="toscaComponent.toscaType === toscaTypes.ServiceTemplate && researchObject">
                        <li class="divider dropdown-divider"></li>
                        <li>
                            <a target="_blank" href="{{ toscaComponent.asRoar }}">ROAR (Research Object
                                Archive)</a>
                        </li>
                    </ng-container>
                </ul>
            </div>
        </ng-template>
        <ng-template #yamlExport>
            <div class="btn-group" dropdown>
                <button dropdownToggle type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split">
                    Export <span class="caret"></span>
                </button>
                <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                    <li>
                        <a target="_blank" href="{{ toscaComponent.yamlCsarPath }}">Download</a>
                    </li>
                    <li *wineryRepositoryHideOnFeature="'radon'">
                        <a (click)="exportToFilesystem()">Export to Filesystem</a>
                    </li>
                    <li *wineryRepositoryShowOnFeature="'radon'">
                        <a (click)="exportToFilesystem()">Export to IDE</a>
                    </li>
                </ul>
            </div>
        </ng-template>
        <winery-version class="" [versions]="versions"></winery-version>
        <div *ngIf="typeUrl">
            <span style="white-space: pre">{{ typeOf }} <a [routerLink]="typeUrl">{{ typeId }}</a></span>
        </div>
    </div>
    <div class="subMenu">
        <a *ngFor="let item of subMenu; index as i"
           class="styledTabMenuButton styledTabMenuButton2ndlevel"
           [ngClass]="{'tab-menu-fix': requiresTabFix}"
           [routerLink]="['./' + item.urlFragment]"
           [routerLinkActive]="'selected'"
           (click)="selectedTab = item.displayName">
            <div class="left"></div>
            <div class="center">{{ item.displayName }}</div>
            <div class="right"></div>
        </a>
    </div>
</div>

<ng-template #confirmDeleteModal>
    <winery-modal-header [modalRef]="deleteConfirmationModalRef"
                         [title]="'Delete ' + (toscaComponent.toscaType | toscaTypeToReadableName)">
    </winery-modal-header>
    <winery-modal-body>
        <p>
            Do you want to delete <span style="font-weight:bold;">{{ toscaComponent.localName }}</span>?
        </p>
    </winery-modal-body>
    <winery-modal-footer (onOk)="deleteConfirmed.emit();" [modalRef]="deleteConfirmationModalRef"
                         [closeButtonLabel]="'Cancel'" [okButtonClass]="'btn-danger'"
                         [okButtonLabel]="'Delete'">
    </winery-modal-footer>
</ng-template>

<ng-template #roarConfirmUploadModal>
    <winery-modal-header [modalRef]="roarUploadConfirmationModalRef"
                         [title]="'Upload ROAR'">
    </winery-modal-header>
    <ng-container *ngIf="!uploadingRoar">
        <winery-modal-body>
            <p> Does the ROAR contain personal data according to Art. 4 GDPR ? </p>
        </winery-modal-body>
        <winery-modal-footer [showDefaultButtons]="false">
            <div style="display: flex">
                <ng-container *ngFor="let option of privacyOptions;let i=index">
                    <button class="btn btn-info"
                            (click)="uploadRoarToDarus(option)">{{option}}</button>
                    <span style="flex: 1 1 auto" *ngIf="i!=privacyOptions.length-1"></span>
                </ng-container>
            </div>
        </winery-modal-footer>
    </ng-container>
    <ng-container *ngIf="uploadingRoar">
        <winery-modal-body>
            <p> Uploading the ROAR to dataverse <span
                style="font-weight:bold;">{{this.configurationService.configuration.darus.dataverse}}</span>
                at <span style="font-weight:bold;">{{this.configurationService.configuration.darus.server}}</span>
                <span *ngIf="!(uploadingRoarFinished || uploadRoarError)"> ...</span>
                <span *ngIf="uploadingRoarFinished"> finished!</span>
                <span *ngIf="uploadRoarError"> failed!</span>
            </p>
            <br>
            <p *ngIf="uploadingRoarFinished">{{roarLocation}}</p>
            <p *ngIf="uploadRoarError" style="color: red">{{uploadRoarError}}</p>
            <mat-progress-bar mode="indeterminate"
                              *ngIf="!uploadingRoarFinished && !uploadRoarError"></mat-progress-bar>
        </winery-modal-body>
        <winery-modal-footer *ngIf="uploadingRoarFinished || uploadRoarError" [showDefaultButtons]="false">
            <div style="display: flex">
                <button class="btn btn-info" *ngIf="uploadingRoarFinished"
                        (click)="closeRoarUploadConfirmationModel(true)">Open in New Tab
                </button>
                <span style="flex: 1 1 auto"></span>
                <button class="btn btn-default" (click)="closeRoarUploadConfirmationModel(false)">OK</button>
            </div>
        </winery-modal-footer>
    </ng-container>
</ng-template>

<ng-template #toscaLightCompatibilityModal>
    <winery-modal-header [modalRef]="toscaLightCompatibilityErrorReportModalRef"
                         [title]="'TOSCA Light Compatibility Error Log'">
    </winery-modal-header>
    <winery-modal-body *ngIf="toscaLightCompatibilityData?.errorList">
        <h4>TOSCA Light Incompatibilities:</h4>
        <ul>
            <li *ngFor="let qName of toscaLightErrorKeys">
                <span>{{ qName }}</span>
                <ul>
                    <li *ngFor="let error of toscaLightCompatibilityData.errorList[qName]">
                        {{ error }}
                    </li>
                </ul>
            </li>
        </ul>
    </winery-modal-body>
    <winery-modal-footer [modalRef]="toscaLightCompatibilityErrorReportModalRef" [showDefaultButtons]="true"
                         [closeButtonLabel]="'Close'"
                         [hideOkButton]="true"></winery-modal-footer>
</ng-template>
